<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Duet Date Picker examples</title>
    <link rel="preload" href="/build/duet.esm.js" as="script" crossorigin="anonymous" />
    <link rel="preload" href="/build/duet-date-picker.entry.js" as="script" crossorigin="anonymous" />
    <link rel="preload" href="/themes/default.css" as="style" />
    <script type="module" src="/build/duet.esm.js"></script>
    <script nomodule src="/build/duet.js"></script>
    <link rel="stylesheet" href="/themes/default.css" id="theme" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/obsidian.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
    <script>
      document.documentElement.className += " js"
      if (hljs) {
        hljs.initHighlightingOnLoad()
      }
    </script>
    <style>
      /* ---------------------------------------------
       * BELOW STYLES ARE JUST FOR THE EXAMPLE,
       * YOU CAN REMOVE AND REPLACE THEM.
       * ------------------------------------------ */

      body {
        font-weight: var(--duet-font-normal);
        font-family: var(--duet-font);
        color: var(--duet-color-text);
        background: var(--duet-color-surface);
        line-height: 1.5;
        margin: 0 auto;
        max-width: 40rem;
        font-size: 100%;
        padding: 2rem;
      }

      .js main {
        transition: opacity 300ms 80ms ease;
        visibility: hidden;
        will-change: opacity;
        opacity: 0;
      }

      .js.hydrated main {
        visibility: visible;
        opacity: 1;
      }

      .js.hydrated .loader {
        opacity: 0;
        visibility: hidden;
      }

      .js .loader,
      .js .loader:after {
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
      }

      .js .loader {
        transition: opacity 300ms 80ms ease;
        top: calc(50% - 2.25rem);
        left: calc(50% - 2.25rem);
        font-size: 10px;
        position: fixed;
        text-indent: -9999rem;
        border-top: 0.5rem solid rgba(0, 0, 0, 0.1);
        border-right: 0.5rem solid rgba(0, 0, 0, 0.1);
        border-bottom: 0.5rem solid rgba(0, 0, 0, 0.1);
        border-left: 0.5rem solid var(--duet-color-primary);
        transform: translateZ(0);
        animation: load 0.7s infinite linear;
      }
      @keyframes load {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      h1 {
        font-weight: var(--duet-font-bold);
        font-size: 2rem;
        line-height: 1.1;
      }

      h2 {
        font-weight: var(--duet-font-bold);
        font-size: 1.5rem;
        margin-top: 3rem;
      }

      p {
        margin-bottom: 1.25rem;
      }

      a {
        color: var(--duet-color-primary);
      }

      output {
        border-radius: var(--duet-radius);
        background: var(--duet-color-button);
        margin: 1rem 0;
        padding: 1rem;
        display: block;
      }

      label {
        margin-bottom: 0.6rem;
        display: block;
      }

      pre {
        line-height: 1.5;
        font-size: 0.875rem;
        white-space: pre;
        display: block;
      }

      pre code,
      code.hljs {
        border-radius: var(--duet-radius);
        font-weight: var(--duet-font-normal);
        background: #282b2e;
        color: #fff;
        display: block;
        overflow-x: auto;
        padding: 1.5rem;
      }

      span.hljs-name {
        font-weight: var(--duet-font-normal);
      }

      code {
        font-family: monaco, Consolas, monospace, monospace;
        background: var(--duet-color-button);
        margin: 0;
        padding: 2px 4px;
      }

      .button,
      .theme {
        background: var(--duet-color-primary);
        color: var(--duet-color-text-active);
        border-radius: var(--duet-radius);
        font-weight: var(--duet-font-bold);
        font-size: 1rem;
        -webkit-appearance: none;
        padding: 0.75rem 1rem;
        margin: 0 0 0.5rem;
        cursor: pointer;
        border: 0;
      }

      .note {
        font-size: 0.75rem;
      }

      .duet-date {
        margin-bottom: 1.25rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Duet Date Picker examples</h1>
      <p>
        Duet Date Picker is an open source version of
        <a href="https://www.duetds.com">Duet Design System’s</a> accessible date picker. It can be implemented and used
        across any JavaScript framework or no framework at all.
      </p>

      <p>
        <strong>
          For documentation, please see the
          <a href="https://github.com/duetds/date-picker">GitHub&nbsp;repository</a>.
        </strong>
      </p>

      <button class="theme">Switch theme</button>
      <script>
        var stylesheet = document.getElementById("theme")
        var theme = document.querySelector(".theme")

        theme.addEventListener("click", function() {
          if (!theme.classList.contains("active")) {
            stylesheet.setAttribute("href", "/themes/dark.css")
            document.documentElement.classList.add("dark-theme")
            theme.classList.add("active")
          } else {
            stylesheet.setAttribute("href", "/themes/default.css")
            document.documentElement.classList.remove("dark-theme")
            theme.classList.remove("active")
          }
        })
      </script>

      <h2>Default</h2>
      <label for="date">Choose a date</label>
      <duet-date-picker identifier="date"></duet-date-picker>
      <pre><code class="html">&lt;label for="date">Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;</code></pre>

      <h2>Using show() method</h2>
      <label for="date2">Choose a date</label>
      <duet-date-picker class="cal" identifier="date2"></duet-date-picker>
      <button type="button" class="button show">Show date picker</button>
      <script>
        var button = document.querySelector(".show")

        button.addEventListener("click", function() {
          document.querySelector(".cal").show()
        })
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date">&lt;/duet-date-picker&gt;
&lt;button type="button">Show date picker&lt;/button&gt;

&lt;script&gt;
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").show()
  });
&lt;/script&gt;</code></pre>

      <h2>Using setFocus() method</h2>
      <label for="date3">Choose a date</label>
      <duet-date-picker class="cal2" identifier="date3"></duet-date-picker>
      <button type="button" class="button focus">Focus date picker</button>
      <script>
        var button = document.querySelector(".focus")

        button.addEventListener("click", function() {
          document.querySelector(".cal2").setFocus()
        })
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date">&lt;/duet-date-picker&gt;
&lt;button type="button">Focus date picker&lt;/button&gt;

&lt;script&gt;
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").setFocus()
  });
&lt;/script&gt;</code></pre>

      <h2>Getting selected value</h2>
      <label for="date4">Choose a date</label>
      <duet-date-picker class="picker" identifier="date4"></duet-date-picker>
      <output>undefined</output>
      <script>
        var picker = document.querySelector(".picker")
        var output = document.querySelector("output")

        picker.addEventListener("duetChange", function(event) {
          output.innerHTML = event.detail.valueAsDate
        })
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;
&lt;output&gt;undefined&lt;/output&gt;

&lt;script&gt;
  const picker = document.querySelector("duet-date-picker")
  const output = document.querySelector("output")

  picker.addEventListener("duetChange", function(event) {
    output.innerHTML = event.detail.valueAsDate
  });
&lt;/script&gt;</code></pre>

      <h2>Predefined value</h2>
      <label for="date5">Choose a date</label>
      <duet-date-picker identifier="date5" value="2020-06-16"></duet-date-picker>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date" value="2020-06-16"&gt;
&lt;/duet-date-picker&gt;</code></pre>

      <h2>Minimum and maximum date</h2>
      <label for="date6">Choose a date</label>
      <duet-date-picker identifier="date6" min="1990-06-10" max="2020-07-18" value="2020-06-16"></duet-date-picker>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date" min="1990-06-10"
  max="2020-07-18" value="2020-06-16"&gt;
&lt;/duet-date-picker&gt;</code></pre>

      <h2>Localization</h2>
      <label for="date7" lang="fi">Valitse päivämäärä</label>
      <duet-date-picker class="picker-fi" lang="fi" identifier="date7"></duet-date-picker>
      <script>
        var pickerFinnish = document.querySelector(".picker-fi")
        var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

        pickerFinnish.dateAdapter = {
          parse: function parse() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
            var createDate = arguments.length > 1 ? arguments[1] : undefined
            var matches = value.match(DATE_FORMAT)

            if (matches) {
              return createDate(matches[3], matches[2], matches[1])
            }
          },
          format: function format(date) {
            return ""
              .concat(date.getDate(), ".")
              .concat(date.getMonth() + 1, ".")
              .concat(date.getFullYear())
          },
        }

        pickerFinnish.localization = {
          buttonLabel: "Valitse päivämäärä",
          placeholder: "pp.kk.vvvv",
          selectedDateMessage: "Valittu päivämäärä on",
          prevMonthLabel: "Edellinen kuukausi",
          nextMonthLabel: "Seuraava kuukausi",
          monthSelectLabel: "Kuukausi",
          yearSelectLabel: "Vuosi",
          closeLabel: "Sulje ikkuna",
          calendarHeading: "Valitse päivämäärä",
          dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
          monthNames: [
            "Tammikuu",
            "Helmikuu",
            "Maaliskuu",
            "Huhtikuu",
            "Toukokuu",
            "Kesäkuu",
            "Heinäkuu",
            "Elokuu",
            "Syyskuu",
            "Lokakuu",
            "Marraskuu",
            "Joulukuu",
          ],
          monthNamesShort: [
            "Tammi",
            "Helmi",
            "Maalis",
            "Huhti",
            "Touko",
            "Kesä",
            "Heinä",
            "Elo",
            "Syys",
            "Loka",
            "Marras",
            "Joulu",
          ],
          locale: "fi-FI",
        }
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Valitse päivämäärä&lt;/label&gt;
&lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;

&lt;script&gt;
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT)
      if (matches) {
        return createDate(matches[3], matches[2], matches[1])
      }
    },
    format(date) {
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Valitse päivämäärä",
    placeholder: "pp.kk.vvvv",
    selectedDateMessage: "Valittu päivämäärä on",
    prevMonthLabel: "Edellinen kuukausi",
    nextMonthLabel: "Seuraava kuukausi",
    monthSelectLabel: "Kuukausi",
    yearSelectLabel: "Vuosi",
    closeLabel: "Sulje ikkuna",
    calendarHeading: "Valitse päivämäärä",
    dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
    monthNames: ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"],
    monthNamesShort: ["Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu"],
    locale: "fi-FI",
  }
&lt;/script&gt;</code></pre>

      <h2>Changing first day of week and date format</h2>
      <label for="date8">Choose a date</label>
      <duet-date-picker first-day-of-week="0" class="picker-week" identifier="date8"></duet-date-picker>
      <script>
        const pickerWeek = document.querySelector(".picker-week")
        const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

        pickerWeek.dateAdapter = {
          parse: function parse() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
            var createDate = arguments.length > 1 ? arguments[1] : undefined
            var matches = value.match(DATE_FORMAT_US)

            if (matches) {
              return createDate(matches[3], matches[1], matches[2])
            }
          },
          format: function format(date) {
            return ""
              .concat(date.getMonth() + 1, "/")
              .concat(date.getDate(), "/")
              .concat(date.getFullYear())
          },
        }

        pickerWeek.localization = {
          buttonLabel: "Choose date",
          placeholder: "mm/dd/yyyy",
          selectedDateMessage: "Selected date is",
          prevMonthLabel: "Previous month",
          nextMonthLabel: "Next month",
          monthSelectLabel: "Month",
          yearSelectLabel: "Year",
          closeLabel: "Close window",
          calendarHeading: "Choose a date",
          dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
          monthNames: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
          ],
          monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          locale: "en-US",
        }
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker first-day-of-week="0" identifier="date"&gt;&lt;/duet-date-picker&gt;

&lt;script&gt;
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT_US)

      if (matches) {
        return createDate(matches[3], matches[1], matches[2])
      }
    },
    format(date) {
      return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Choose date",
    placeholder: "mm/dd/yyyy",
    selectedDateMessage: "Selected date is",
    prevMonthLabel: "Previous month",
    nextMonthLabel: "Next month",
    monthSelectLabel: "Month",
    yearSelectLabel: "Year",
    closeLabel: "Close window",
    calendarHeading: "Choose a date",
    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    locale: "en-US",
  }
&lt;/script&gt;</code></pre>

      <h2>Required atrribute</h2>
      <label for="date9">Choose a date (required)</label>
      <form class="form-picker-required">
        <duet-date-picker required identifier="date9"></duet-date-picker>
        <button type="submit" class="button">Submit form</button>
      </form>
      <script>
        const form = document.querySelector(".form-picker-required")
        form.addEventListener("submit", function(e) {
          e.preventDefault()
          alert("Submitted")
        })
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker required identifier="date"&gt;&lt;/duet-date-picker&gt;

&lt;script&gt;
  const form = document.querySelector(".form-picker-required")
  form.addEventListener("submit", function(e) {
    e.preventDefault()
    alert("Submitted")
  })
&lt;/script&gt;</code></pre>

      <h2>Disable selectable days</h2>
      <p>
        This only disables selection of dates in the popup calendar. You must still handle the case where a user enters
        a disallowed date into the input.
      </p>
      <label for="dateDisabledWeekend">Choose a date</label>
      <duet-date-picker class="picker-disabled-weekend" identifier="dateDisabledWeekend"></duet-date-picker>
      <script>
        function isWeekend(date) {
          return date.getDay() === 0 || date.getDay() === 6
        }

        const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
        pickerDisableWeekend.isDateDisabled = isWeekend

        pickerDisableWeekend.addEventListener("duetChange", function(e) {
          if (isWeekend(e.detail.valueAsDate)) {
            alert("Please select a weekday")
          }
        })
      </script>
      <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;

&lt;script&gt;
  function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }

  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
  pickerDisableWeekend.isDateDisabled = isWeekend

  pickerDisableWeekend.addEventListener("duetChange", function(e) {
    if (isWeekend(e.detail.valueAsDate)) {
      alert("Please select a weekday")
    }
  })
&lt;/script&gt;</code></pre>
      <br />
      <p>
        © 2020 LocalTapiola Services Ltd /
        <a href="https://www.duetds.com">Duet&nbsp;Design&nbsp;System</a>.<br />Licensed under the MIT license.
      </p>
    </main>
    <div class="loader">Loading…</div>
  </body>
</html>
